<template>
  <div class="homeHeader">
    <div class="homeHeader-left">
      <van-icon class="iconfont" class-prefix="icon" name="fenlei"></van-icon>
      <span>分类</span>
    </div>
    <div class="homeHeader-right" @click="enterSearch">
      <van-icon name="search" />
      <span class="search-text">搜索商品店铺</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    enterSearch () {
      this.$emit('enterSearch')
    }
  }
}
</script>

<style lang="scss" scoped>
.homeHeader{
  height:46px;
  position: fixed;
  left:0;
  right:0;
  top:0;
  background: #f66;
  color:#fff;
  font-size:14px;
  display:flex;
  align-items: center;
  padding:0 10px;
  z-index:10;
  &-left{
    padding-right:5px;
    font-size:12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &-right{
    height:30px;
    background: rgba(255,255,255,.2);
    border-radius:15px;
    flex:1;
    display:flex;
    align-items: center;
    .van-icon{
      margin: 0 10px;
    }
  }
}
</style>
